<template>
  <Transition name="slide-left">
    <div v-if="showMessage" class="message flex flex-col h-100 gr-4">
      <PageHead
        :title="currentMessage?.title"
        @back="showMessage = false"
        @more="messageAction.more"
      >
      </PageHead>
      <div class="message-list px-16" :style="{ height: `${height}px` }">
        <ul class="flex flex-col gr-8">
          <li v-for="(item, key) in list" :key="key">
            <div v-if="item.showTime" class="text-center text-999 my-12">
              {{ item.time }}
            </div>

            <div :class="[item.from]" class="flex align-top gc-4">
              <img :src="item.avatar" height="28" width="28" />
              <div>
                <div v-if="item.from === 'received'" class="username">
                  {{ item.username }}
                </div>
                <div class="chat-bubble">{{ item.msg }}</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <InputBoxVue></InputBoxVue>
    </div>
  </Transition>
</template>

<script setup lang="ts">
  import PageHead from '@/views/components/page-head/PageHead.vue';
  import morePng from '@/assets/images/more.png';
  import { computed, ref } from 'vue';
  import { showMessage, currentMessage, messageAction } from './message';
  import InputBoxVue from './input/InputBox.vue';

  const height = ref(window.innerHeight - 104);
  const list = computed(() => {
    return currentMessage.value?.messageList;
  });
</script>

<style lang="scss" scoped>
  @import './message';
</style>
